<template>
  <div class="contain">
    <div>ddddd</div>
    <div>ddddd</div>
    <div>ddddd</div>
    <div class="banner" @click="bannerClick">
      <img src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201910/78b240572657a6da67e662540c846dd6.jpg_750x200_b75c8be9.jpg" alt="">
    </div> 
   <detail-amima>
    <detail-swiper 
    v-show="show"
    @bannerShow = "bannerShow"
    >
    </detail-swiper>
   </detail-amima>

     <detail-header 
      class="headers" 
      :style="showHead"
     >
     </detail-header>
     <detail-list :list="list"></detail-list>
  </div>
</template>
<script>
import DetailSwiper from './swiper'
import DetailHeader from './HeaderA'
import DetailList from './DetailList'
import DetailAmima from './DetailAmima'
export default {
  name: 'Detail',
  components: {
    DetailSwiper,
    DetailHeader,
    DetailList,
    DetailAmima
  },
  data () {
    return {
      show: false,
      showHead: {
        opacity: 0
      },
       list: [
          {
            'title': '一级',
            'children': [{
               'title': '二级',
               'children': [{
               'title': '二级',
                'children': [{
               'title': '二级'
            }]
            }]
            }]
          },
           {
            'title': '一级',
            'children': [{
               'title': '二级'
            }]
          },
           {
            'title': '一级',
            'children': [{
               'title': '二级'
            }]
          }
        ]
    }
  },
  methods: {
    bannerClick () {
      this.show = true
    },
    bannerShow () {
      this.show = false
    },
    scrollEvent () {
      const scrollT = document.documentElement.scrollTop  
      if (scrollT > 50) { 
        let opa = scrollT / 100
        opa = opa > 1 ? 1 : opa 
       this.showHead.opacity = opa
      } else { 
         this.showHead.opacity = 0
      }  
    }
  },
  activated () {
    document.addEventListener('scroll', this.scrollEvent)
  }
}
</script>

<style>
 img{
   width: 100%;
 }
 .contain{
   height: 1200px;
 }
 .headers{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%; 
 }
</style>
